<template>
	<view class="container" @click="closePopup">
		<Navigator></Navigator>
		<template v-if="deviceList.length == 0">
			<view class="nodevice">
				<image class="addimg" src="/static/add_first.png"></image>
				<view class="title">
					{{ $t('device.bindFirstSmartDevice') }}
				</view>
				<view class="describe">
					{{ $t('device.provideConvenientSmartControlExperience') }}
				</view>
				<view class="addbtn" @click="addDevice">
					{{ $t('device.addSmartDevice') }}
				</view>
			</view>
	</template>
	<template v-else>
		<view class="device-list">
			<view class="device-card" v-for="(d, index) in deviceList" :key="index">
				<view class="status-indicators">
					<image v-if="d.networkType == '4G'" class="status-icon" src="/static/cellular.png"></image>
					<image v-if="d.networkType == 'WIFI'" class="status-icon" src="/static/wifi.png"></image>
					<image class="status-icon" src="/static/battery.png"></image>
				</view>
				
				<view class="card-content">
					<view class="device-section" @click="naviToDeviceSettingPage(d.id)">
						<image class="device-icon" src="/static/device-logo.png"></image>
						<view class="device-info">
							<text class="device-name">{{ $t('device.smartTablet') }}</text>
							<image class="right-arrow" src="/static/rightcursor.png"></image>
						</view>
					</view>
					
					<view class="assistant-section">
						<view class="assistant-content">
							<image class="robot-avatar" :src="d.privateBotLogo ? apiHost + d.privateBotLogo : (d.botLogo ? apiHost + d.botLogo : '/static/robot.png')"></image>
							<view class="assistant-title-row">
								<text class="assistant-title">{{d.privateBotName ? d.privateBotName : d.name}}</text>
								<view class="validity-info">
									<text class="validity-text">{{ $t('device.validityPeriod') }} {{formatDate(d.expireTime)}}</text>
									<view class="renew-btn" v-if="isOverTime(d.expireTime)" @click="deviceRenew(d.id)">
										<text>{{ $t('device.renew') }}</text>
										<image src="/static/renew_rightcursor.png"></image>
									</view>
								</view>
							</view>
						</view>

						<view style="height: 1px;background: #EBEFF4; margin-right: 10px;margin-bottom: 3px;"></view>
						
			<view class="assistant-details">
				<view style="position: relative;">
					<view class="assistant-desc" @click.stop="showDescPopup(d, index)">
						{{d.botDesc ? d.botDesc : '我是您的智能家居助手，我可以帮您控制家电、提供生活建议和健康提醒等功能。'}}
					</view>
					
				<!-- 相对定位的气泡 -->
				<view v-show="currentDescIndex === index && showPopup" class="desc-bubble" @click.stop>
					<view class="bubble-content">
						<view class="bubble-text">{{ currentDesc.desc }}</view>
					</view>
					<view class="bubble-arrow"></view>
				</view>
				</view>
			</view>
					</view>
				</view>
			</view>
		</view>
	</template>
	</view>
</template>

<script>
	import api from '../../js/api'
	import Navigator from '@/components/Navigator.vue'
	import util from '@/js/util'
	export default {
		data() {
		return {
			apiHost: getApp().globalData.apiHost,
			deviceList: [],
			showAddMenu: false,
			showPopup: false,
			currentDescIndex: -1,
			currentDesc: {
				desc: ''
			}
		}
		},
		onShow() {
			if (!util.isLogin()) {
				uni.navigateTo({url:'/pages/login/login'})
				return
			}
			this.getDeviceList()
		},
		onPullDownRefresh() {
			this.getDeviceList()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getDeviceList() {
				const userInfo = uni.getStorageSync('userInfo')
				api.getDeviceList(userInfo ? userInfo.phone : 0).then(res => {
					console.log('getDeviceList: ', res)
					this.deviceList = res.data
				})
			},
			addDevice() {
				this.showAddMenu = false
				// uni.navigateTo({
				// 	url: '/pages/device/selectproduct'
				// })
				uni.navigateTo({
					url: '/pages/device/devicesettingguide'
				})
			},
			scanQRCode() {
				this.showAddMenu = false
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				})
			},
			naviToDeviceSettingPage(id) {
				uni.navigateTo({
					url: `/pages/device/devicesetting?id=${id}`
				})
			},
			deviceRenew(id) {
				uni.navigateTo({
					url: `/pages/device/renew?id=${id}`
				})
			},
			formatDate(dateStr) {
				if (!dateStr) return ''
				const date = new Date(dateStr)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}/${month}/${day}`
			},
		isOverTime(expireTime) {
			return new Date(expireTime).getTime() < new Date().getTime()
		},
	showDescPopup(device, index) {
		// 如果点击同一个，则切换显示/隐藏
		if (this.currentDescIndex === index && this.showPopup) {
			this.showPopup = false
			this.currentDescIndex = -1
		} else {
			this.currentDesc = {
				desc: device.botDesc ? device.botDesc : this.$t('device.defaultAssistantDesc')
			}
			this.currentDescIndex = index
			this.showPopup = true
		}
	},
		closePopup() {
			if (this.showPopup) {
				this.showPopup = false
				this.currentDescIndex = -1
			}
		}
	},
	components: {
		Navigator
	}
	}
</script>

<style lang="scss">
/* 全局样式 */
page {
	background-color: #F1F2F5;
}
</style>

<style lang="scss" scoped>
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top: 100px;
		box-sizing: border-box;
		background-color: #F1F2F5;

		.nodevice {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 20px;
			border-radius: 16px;
			background-color: #fff;
			height: calc(100% - 40px);

			.addimg {
				width: 280px; 
				height: 200px;
				margin-bottom: 20px;
			}
			.title {
				color: #1F2937;
				font-size: 16px;
				font-weight: 600;
				margin-bottom: 20px;
			}
			.describe {
				color: #6B7280;
				font-size: 14px;
				margin-bottom: 26px;
			}
			.addbtn {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-size: 14px;
				background: #0256FF;
				width: 134px;
				height: 46px;
				border-radius: 8px;
			}
		}
	
	.device-list {
		padding: 16px;
		
		.device-card {
			position: relative;
			border-radius: 16px;
			margin-top: 36px;
			
			.status-indicators {
				position: absolute;
				top: -20px;
				right: 16px;
				display: flex;
				align-items: center;
				
				.status-icon {
					width: 16px;
					height: 16px;
					margin-left: 8px;
				}
			}
			
			.card-content {
				display: flex;
				background-color: #FAFAFC;
				border-radius: 8px;
				
				.device-section {
					position: absolute;
					top: -9px;
					display: flex;
					flex-direction: column;
					margin-right: 10px;
					background-color: #FFFFFF;
					border-radius: 8px;
					padding: 10px;
					
					.device-icon {
						width: 104px;
						height: 104px;
						margin-bottom: 16px;
						background-color: #F8F9FA;
						padding: 16px;
						box-sizing: border-box;
					}
					
					.device-info {
						display: flex;
						align-items: center;
						justify-content: center;
						
						.device-name {
							font-size: 14px;
							font-weight: 600;
							color: #1F2937;
							margin-right: 8px;
						}
						
						.right-arrow {
							width: 17rpx;
							height: 27rpx;
						}
					}
				}
				
				.assistant-section {
					flex: 1;
					margin-left: 136px;
					.assistant-content {
						display: flex;
						margin-top: 10px;
						padding: 10px 10px 4px 10px;

						.robot-avatar {
							width: 56px;
							height: 56px;
							border-radius: 24px;
							float: left;
							margin-left: -10px;
							margin-right: 12px;
							margin-bottom: 8px;
							box-sizing: border-box;
						}

						.assistant-title-row {
							display: flex;
							align-items: flex-start;
							flex-direction: column;
							justify-content: space-around;
							margin-bottom: 8px;
							
							.assistant-title {
								font-size: 14px;
								font-weight: 600;
								color: #1F2937;
							}
							
							.validity-info {
								display: flex;
								align-items: center;
								justify-content: center;
								
								.validity-text {
									font-size: 10px;
									color: #D96F04;
									margin-right: 4px;
								}
								
								.renew-btn {
									border: 1px solid #FA830C;
									background-color: #FFF2E0;
									color: #D96F04;
									font-size: 10px;
									border-radius: 368px;
									padding: 3px 6px;
									text-align: center;

									image {
										margin-left: 3px;
										width: 5.11px;
										height: 8.74px;
									}
								}
							}
						}
					}

				.assistant-details {
					margin-right: 10px;
					margin-bottom: 10px;
					
			.assistant-desc {
				font-size: 12px;
				color: #6B7280;
				line-height: 20px;
				letter-spacing: 0px;
				margin-top: 8px;
				clear: both;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				cursor: pointer;
			}
				}
				}
			}
		}
	}
	
	.desc-bubble {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 8px;
		z-index: 9999;
		
		.bubble-content {
			background-color: #FFFFFF;
			border-radius: 8px;
			padding: 12px 16px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			border: 1px solid #E5E7EB;
			
			.bubble-text {
				font-size: 12px;
				color: #6B7280;
				line-height: 20px;
			}
		}
		
		.bubble-arrow {
			position: absolute;
			top: -6px;
			left: 20px;
			width: 0;
			height: 0;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 6px solid #FFFFFF;
			filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
		}
	}
}
</style>
